<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'user_cpl.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
  </head>
  
  <body bgcolor="#EEF2FB">
  <center>
	<div>
	<form action="userAction!UpUserInfo" method="post">
<table width="100%" border="0">
  <tr>
    <td colspan="2" align="center">用户个人信息</td>
  </tr>
  <tr>
    <td width="40%" height="40%" align="right">用户名：</td>
    <td width="40%" height="40%" align="left">
    	<input type="text" readonly="readonly" name="userName" value=${UserName.userName} />
    </td>
    <td width="20"></td>
  </tr>
  <tr>
    <td width="40%" height="40%" align="right">邮箱：</td>
    <td width="40%" height="40%" align="left">
    	<input type="text" name="useremail" value=${UserName.useremail} />
    </td>
    <td width="20"></td>
  </tr>
  <tr>
    <td width="40%" height="40%" align="right">生日：</td>
    <td width="40%" height="40%" align="left">
    	<input type="hidden" name="birthday" value=""/>
    <div id="test"></div>
	</td>
	
	<td width="20"></td>
  </tr>
  <tr>
    <td width="40%" height="40%" align="right">性别：</td>
    <td width="40%" height="40%" align="left">
    	<input type="text" name="sex" value=${UserName.sex} />
    </td> 
    <td width="20"></td>
  </tr>
  <tr>
    <td width="40%" height="40%" align="right">用户类别：</td>
    <td width="40%" height="40%" align="left">
    	<input type="hidden" name="userId" value=${UserName.userId} >
    	<input type="hidden" name="userpass" value=${UserName.userpass} >
    	<input type="text" name="usertype" readonly="readonly" value=${UserName.usertype} >
	</td>
    <td width="20"></td>
  </tr>
  <tr>
    <td width="40%" height="40%" align="right">注册时间</td>
    <td width="40%" height="40%" align="left">
    	<input type="text" name="regdate" readonly="readonly" value=${UserName.regdate} >
    </td>
    <td width="20"></td>
  </tr>
  <tr>
    <td width="40%" height="40%" align="right">上传头像：</td>
    <td width="40%" height="40%" align="left">
    	<input type="file" name="headImage" value=${UserName.headImage} >
    </td>
   	<td width="20"></td>
  </tr>
  <tr>
    <td width="40%" height="40%" align="right">&nbsp;</td>
    <td width="40%" height="40%" align="center"">
    	<input type="submit" value="提交"/>
    </td>
   	<td width="20"></td>
  </tr>
</table>
		</form>
	</div>
  </center>
</body>
  <script type="text/javascript">
	(function ($){
	    function isRN(y){//计算闺年
	        return y%4 == 0 || (y%100 == 0 && y%400 == 0);
	    }
	    function getDays(y, m){//计算每月天数
	        if (m == 2) {
	            return isRN(y) ? 29 : 28;
	        }else if(m < 8){
	            return m%2 == 0 ? 30 : 31;
	        }else{
	            return m%2 == 0 ? 31 : 30;
	        }
	    }
	    function updateDays(sel, b){
	        sel.length = 0;
	        for (var a = 1; a < b+1; a++) {
	            sel.options.add(new Option(a+'日', a));
	        }
	    }
	    function createSelect(a, b, c){
	        var sel = document.createElement('select');
	        var c = c || '';
	        sel.options.add(new Option('请选择', -1));
	        if (a > b) {
	            for (; a > b; a--) {
	                sel.options.add(new Option(a+c, a));
	            }              
	        }else{
	            for (; a < b; a++) {
	                sel.options.add(new Option(a+c, a));
	            }  
	        }
	        return sel;
	    }
	    $.fn.birthdaySelect = function (fn){
	        var box = this.eq(0);
	        var year, mon, day, hidden;
	        fn = fn || function(){};
	        if (box.size()) {
	            year = createSelect(2012, 1940, '年', -1);
	            box.append(year);
	            mon = createSelect(1, 13, '月');
	            box.append(mon);
	            day = createSelect(1, 32, '日');
	            box.append(day);
	            hidden = box.append('<input type="hidden" name="birthday" />');
	            $(year).change(upRN);
	            $(mon).change(upRN);
	            $(day).change(function (){
	                update();
	            });
	        }
	        function upRN(){
	            var y = year.value;
	            var m = mon.value;
	            if (this.options[0].value == -1) {
	                this.removeChild(this.options[0]);
	            }
	            if (y != -1 && m != -1) {
	                var d = getDays(y, m);
	                var idx = day.options.selectedIndex;
	                updateDays(day, d);
	                day.options.selectedIndex = Math.min(idx, d);
	             }
	             update();
	        }
	        function update(){
	            var data = [year.value,mon.value,day.value].join('/');
	            hidden.value = data.indexOf('-1') > -1 ? -1 : data;//如果值不正确返回-1
	            input=document.getElementsByName("birthday");//input中的name属性
	            input[0].value=data;//向特定的input中赋值
	            fn(hidden.value);
	        }
	    };
	/*
	向一个容器中插入三个下拉列表输入生日。
	支持闺年判断。
	$(容器).birthdaySelect(改变事件);
	*/
	    $('#test').birthdaySelect(function (val){
	        $('#data').html(val);
	    	alert(date);
	    });
	})(jQuery);
</script>
</html>
